<div class="panel panel-default-custom" ng-controller="NotesController">
    <div class="panel-heading handle bold">
        {{notesWidget.title| translate}}
        <span class="pull-right widget-link">
            <a class="small-horizontal-spacing" href ng-click="expandCollapse(notesWidget)">
                <span ng-show="notesWidget.expand"><i class="fa fa-chevron-up" ng-attr-title="{{collapseLabel}}"></i></span>
                <span ng-show="!notesWidget.expand"><i class="fa fa-chevron-down" ng-attr-title="{{expandLabel}}"></i></span>
            </a>
            <a ng-show="userAuthority.canAdministerDashboard || !lockedList[selectedProgram.id]" class="small-horizontal-spacing" href ng-click="removeWidget(notesWidget)" ng-attr-title="{{removeLabel}}"><i class="fa fa-times-circle"></i></a>            
        </span>        
    </div>
    <div ng-show="notesWidget.expand" class="panel-body dashboard-widget-container">

        <!-- notes section begins -->
        <div ng-show="showNotesDiv">
            <div ng-show="!selectedEnrollment" class="alert alert-danger">{{'not_yet_enrolled_note'| translate}}</div>
            <div ng-show="selectedEnrollment" class="remove-default-padding">                
                <div class="add-default-padding" ng-if="selectedProgram.access.data.write">
                    <textarea class="form-control" rows="3" ng-model="note.value" ng-attr-placeholder="{{'your_note_here'| translate}}"></textarea> 
                    <div class="vertical-spacing">
                        <button type="button" 
                                class="btn btn-primary"
                                ng-click="addNote()">
                            {{'add'| translate}}
                        </button>        
                        <button type="button" 
                                class="btn btn-default small-horizontal-spacing" 
                                ng-click="clear()">
                            {{'clear'| translate}}
                        </button>
                    </div>
                </div>
                <script type="text/ng-template" id="popover.html">
                    <div class="wrap-text">{{content.value}}</div>
                    <hr>
                    <p><strong>{{'created_by' | translate}}: </strong>{{content.storedBy}}</p>
                    <p><strong>{{'date' | translate}}: </strong>{{content.storedDate}}</p>                           
                </script>
                <table class="table table-striped table-bordered dhis2-table-hover table-borderless">
                    <tr ng-repeat="note in selectedEnrollment.notes| filter:noteSearchText" d2-pop-over content="note" template="popover.html" details="{{'details'| translate}}">
                        <td class="notes-heading-column">
                            <span>{{note.value}}</span>
                        </td>
                        <td class="notes-date-column">
                            <span class="pull-right">{{note.displayDate}}</span>
                        </td>
                    </tr>
                </table>
            </div>
            <div ng-show="selectedEnrollment && !selectedEnrollment.notes" class="alert alert-warning">{{'no_notes_exist'| translate}}</div> 
        </div>
        <!-- notes section ends -->
        
    </div>
</div>
